<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>


<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot=!isHot">切换天气</button>

        <button @click="numbers.a++">点击a+1</button>
        <h1>{{numbers.a}}</h1>
        <button @click="numbers.b++">点击b+1</button>
        <h1>{{numbers.b}}</h1>
    </div>
</body>

<!-- 深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)
(2).配置deep:true可以监测对象内部值改变 (多层)
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。 -->
<script type="text/javascript">
   Vue.config.productionTip=false;
 
    let vm =new Vue({
        el:"#root",
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot?"炎热":"凉快"
            }
        },
        watch:{
            'numbers.a':{
                immediate:true,  //立刻调用handler
                handler(newValur,oldValue){
                    console.log("调用了",newValur,oldValue)
                }
            }
            // 'numbers.b':{
            //     immediate:true,  //立刻调用handler
            //     handler(newValur,oldValue){
            //         console.log("调用了",newValur,oldValue)
            //     }
            // },

            // numbers:{
            //     deep:true,
            //     handler(){
            //         console.log("调用了",this.numbers.a,this.numbers.b)
            //     }
            // },
        }
    })
    
</script>
</html>